<template>
    <div class="container">
        <div class="header">
            <van-nav-bar
            title="填写服务订单"
            left-arrow
            @click-left="onClickLeft"
        />
        </div>
        <stalusBar item="0"/>
        <van-cell class="cell">
            <template #title>
                <van-image
                :src="createInfo.service.serviceImg"
                style="width: 25px; height: 25px;"
                />
                <span class="service-name">{{ createInfo.service.serviceName }}</span>
            </template>
            <template #default>
                <div class="service-text">服务内容</div>
            </template>
        </van-cell>
        <van-cell-group class="cell">
          <van-cell>
            <template #title>
                就诊医院
            </template>
            <template #default>
                <div @click="showHospital=true">
                    {{ form.hospital_name || '请选择就诊医院'}}
                    <van-icon name="arrow" />
                </div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
                就诊时间
            </template>
            <template #default>
                <div @click="showTime=true">
                    {{ currentDate || '请选择就诊时间' }}
                    <van-icon name="arrow" />
                </div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
                陪诊师
            </template>
            <template #default>
                <div @click="showComponion=true">
                    {{ dateName || '请选择陪诊师' }}
                    <van-icon name="arrow" />
                </div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
                接送地址
            </template>
            <template #default>
                <van-field
                class="text"
                input-align="right"
                v-model="form.receiveAddress"
                placeholder="请填写接送地址"
                />
            </template>
          </van-cell>
          <van-cell>
            <template #title>
                联系电话
            </template>
            <template #default>
                <van-field
                class="text"
                input-align="right"
                v-model="form.tel"
                placeholder="请填写联系电话"
                />
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group title="服务需求" class="cell">
                <van-field
                class="text"
                style="height: 100px;"
                v-model="form.demand"
                placeholder="请简单描述您要的就诊科室.."
                />
        </van-cell-group>
        <van-button @click="submit" class="sumbit" type="primary" size="large">提交订单</van-button>
        <van-popup
          v-model:show="showHospital"
          position="bottom"
          :style="{ height: '50%' }"
        >
        <van-picker
          :columns="showHospColumns"
          @confirm="showHospConfirm"
          @cancel="showHospital = false"
        />
        </van-popup>
        <van-popup
          v-model:show="showTime"
          position="bottom"
          :style="{ height: '50%' }"
        >
        <van-date-picker
          @confirm="showTimeConfirm"
          @cancel="showTime = false"
          title="选择日期"
          :min-date="minDate"
        />
        </van-popup>
        <van-popup
          v-model:show="showComponion"
          position="bottom"
          :style="{ height: '50%' }"
        >
        <van-picker
          :columns="componionColumns"
          @confirm="showComponionConfirm"
          @cancel="showComponion = false"
        />
        </van-popup>
        <!-- 支付二维码弹窗 -->
        <van-dialog v-model:show="showCode" :showConfirmButton="false">
          <van-icon name='cross' class="close" @click="closeCode"/>
          <div>微信支付</div>
          <img :src="codeImg">
          <div>请使用本人微信扫描二维码</div>
        </van-dialog>
    </div>
</template>

<script setup>
import stalusBar from '../../components/stalusBar.vue'
import { getH5Companion, postCreateOrder } from '../../api';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import Qrcode from 'qrcode'
const router = useRouter()
//点击导航栏返回上一层数据
const onClickLeft = () => history.back();
onMounted( async () => {
    const { data } = await getH5Companion()
    Object.assign(createInfo, data.data)
    console.log(createInfo);
    
})
//创建初始数据
const createInfo = reactive({
    companion: [],
    hospitals: [],
    service: {},
})
//form数据
const form = reactive({})
// 就诊医院弹出层变量
const showHospital = ref(false)
// 医院选择器
const showHospColumns = computed(() => {
    return createInfo.hospitals.map(item => {
        return { text: item.name, value: item.id}
    })
})
//选择医院
const showHospConfirm = (item) => {
    form.hospital_id = item.selectedValues[0]
    form.hospital_name = item.selectedOptions[0].text
    //关闭弹出层
    showHospital.value = false
}
//选择就诊时间
const showTime = ref(false)
const currentDate = ref()
// 最小日期
const minDate = ref(new Date())
//提交time数据
const showTimeConfirm = (item) => {
    const dateStr = item.selectedValues.join('-')
    currentDate.value = dateStr
    form.starttime = new Date(dateStr).getTime()
    showTime.value = false
    
}
//陪诊师弹窗
const dateName = ref()
const showComponion = ref(false)
const componionColumns = computed(() => {
  return createInfo.companion.map(item => {
    return { text: item.name, value: item.id }
  })
})
const showComponionConfirm = (item) => {
  console.log(item);
    dateName.value = item.selectedOptions[0].text
    form.companion_id = item.selectedOptions[0].value
  showComponion.value = false
    
}
//支付弹窗二维码
const showCode = ref(false)
const codeImg = ref('')
//点击关闭跳转页面
const closeCode = () => {
  showCode.value = false
  router.push('/order')
}
//点击提交服务订单
const submit = async () => {
  console.log(form);
  
  const params = [
    'hospital_id',
    'hospital_name',
    'demand',
    'companion_id',
    'receiveAddress',
    'tel',
    'starttime'
  ]
  for (const i of params) {
    if (!form[i]) {
      showNotify({ message: '请把每一项都填写' });
      return
    }
  }
  const res = await postCreateOrder(form)
  Qrcode.toDataURL(res.data.data.wx_code).then((url) => {
    showCode.value = true
    codeImg.value = url
  })
  
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }
}
.service-name {
    margin-left: 10px;
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>